<script setup lang="ts">
import {Delete, Edit} from "@element-plus/icons-vue";
import useUser from "@/hook/useUser.ts";
import CreateUser from "@/views/permission/userpopups/CreateUser.vue";
import EditUser from "@/views/permission/userpopups/EditUser.vue";
import {useLoginStore} from "@/store/usersLoginStore.ts";

const loginStore = useLoginStore();
const {
  usersStore,
  search,
  formatCATTime,
  formatUATTime,
  formatLoginTime,
  edit,
  del,
  handleCurrentChange,
  handleSizeChange,
  selectedUser,
  selectedallUser,
  handleBatchDelete,
  createUser
} = useUser();
</script>

<template>
  <div>
    <el-container>
      <el-main>
        <el-form :inline="true" :model="usersStore.filteredData" class="demo-form-inline">
          <el-form-item label="用户名称">
            <el-input v-model="usersStore.filteredData.userName" placeholder="用户名" clearable/>
          </el-form-item>
          <el-form-item label="用户登陆名">
            <el-input v-model="usersStore.filteredData.loginName" placeholder="登录名" clearable/>
          </el-form-item>
          <el-form-item label="用户邮箱">
            <el-input v-model="usersStore.filteredData.email" placeholder="用户邮箱" clearable/>
          </el-form-item>
          <el-form-item label="用户电话">
            <el-input v-model="usersStore.filteredData.phone" placeholder="用户电话" clearable/>
          </el-form-item>
          <el-form-item label="用户角色">
            <el-select
                v-model="usersStore.filteredData.roleName"
                filterable
                placeholder="用户角色"
                style="width: 200px"
                clearable
            >
              <el-option
                  v-for="item in usersStore.roleList"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用户状态" style="width: 260px">
            <el-select v-model="usersStore.filteredData.status" placeholder="用户状态">
              <el-option label="选择状态" :value="-1"></el-option>
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table-buttons">
          <el-button type="primary" @click="createUser" v-if="loginStore.buttonPermissions.UserCreate">新增用户
          </el-button>
          <el-button type="primary" @click="handleBatchDelete" v-if="loginStore.buttonPermissions.UserBatchDel">批量删除
          </el-button>
        </div>
        <el-table :data="usersStore.userList"
                  @select="selectedUser"
                  @select-all="selectedallUser"
                  table-layout="auto"
                  border style="width: 100%">
          <el-table-column type="selection"/>
          <el-table-column prop="ID" label="ID" header-align="center" align="center"></el-table-column>
          <el-table-column prop="user_name" label="用户名称" header-align="center" align="center"
          >
          </el-table-column>
          <el-table-column prop="login_name" label="用户登陆名" header-align="center" align="center"
          >
          </el-table-column>
          <el-table-column prop="role" label="角色" header-align="center" align="center">
            <template #default="scope">
              <el-tag type="primary" size="large" round v-for="(role) in scope.row.roles" :key="role.ID">
                {{
                  role.name
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别" header-align="center" align="center"
          >
            <template #default="scope">
              <el-tag size="large" :type="scope.row.sex === 1 ? 'success' : 'warning'">
                {{ scope.row.sex === 1 ? '男' : '女' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" header-align="center" align="center"
          ></el-table-column>
          <el-table-column prop="email" label="用户邮箱" header-align="center" align="center"
          ></el-table-column>
          <el-table-column prop="phone" label="用户电话" header-align="center" align="center"
          ></el-table-column>
          // 状态
          <el-table-column prop="isUsable" label="用户状态" header-align="center" align="center">
            <template #default="scope">
              <el-tag size="large" :type="scope.row.status === 1 ? 'success' : 'danger'">
                {{ scope.row.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="avatar" label="头像" header-align="center" align="center">
            <template #default="scope">
              <img :src="usersStore.avatars[scope.row.ID]" alt=""
                   style="width: 50px;height: 50px;border-radius: 50%">
            </template>

          </el-table-column>
          <el-table-column prop="creator" label="创建者" header-align="center" align="center">
            <template #default="scope">
              <el-tag type="primary" size="large">{{ scope.row.created_user.user_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="更新者" header-align="center" align="center">
            <template #default="scope">
              <el-tag type="primary" size="large">{{ scope.row.updated_user.user_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="CreatedAt" label="创建时间" :formatter="formatCATTime"
                           header-align="center" align="center"></el-table-column>
          <el-table-column prop="UpdatedAt" label="更新时间" :formatter="formatUATTime"
                           header-align="center" align="center"
          ></el-table-column>
          <el-table-column prop="loginTime" label="上次登录时间" :formatter="formatLoginTime"
                           header-align="center" align="center"
          ></el-table-column>
          <el-table-column label="操作" width="110" header-align="center" align="center"
                           v-if="loginStore.buttonPermissions.UserEdit ||loginStore.buttonPermissions.UserDel ">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" @click="edit(scope.row)"
                         :disabled="scope.row.user_name==='超级管理员'" v-if="loginStore.buttonPermissions.UserEdit"
                         circle>
              </el-button>
              <el-button type="danger" :icon="Delete" @click="del(scope.row)"
                         :disabled="scope.row.user_name==='超级管理员'" v-if="loginStore.buttonPermissions.UserDel"
                         circle>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
          <el-pagination
              v-model:current-page="usersStore.filteredData.page"
              v-model:page-size="usersStore.filteredData.pageSize"
              :page-sizes="usersStore.pageSize"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="usersStore.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
    <CreateUser v-if="usersStore.createUserDrawer"/>
    <EditUser v-if="usersStore.editUserDrawer"/>
  </div>
</template>

<style scoped lang="scss">
.table-buttons {
  margin-bottom: 10px; /* 或者您希望的其他值 */
}

.pagination-wrapper {
  display: flex; // 启用Flexbox
  justify-content: flex-end; // 子项靠右对齐
  margin-top: 20px; // 设置分页组件距离上边表格的距离
}
</style>